<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>抖音朋友页</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 ElementPlus CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/element-plus@2.4.1/dist/index.min.css"
      rel="stylesheet"
    />
    <!-- 引入 Font Awesome -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- Tailwind 配置 -->
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: "#FE2C55",
              dark: "#121212",
              "dark-light": "#1F1F1F",
              "gray-light": "#999999",
              "gray-lighter": "#CCCCCC",
            },
            fontFamily: {
              sans: ["Inter", "system-ui", "sans-serif"],
            },
          },
        },
      };
    </script>

    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .scrollbar-hide {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
          display: none;
        }
        .text-shadow {
          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
        .animate-fade-in {
          animation: fadeIn 0.3s ease-in-out;
        }
        @keyframes fadeIn {
          from {
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
      }
    </style>
  </head>
  <body class="bg-dark text-white font-sans">
    <div id="app" class="min-h-screen flex flex-col">
      <!-- 顶部导航栏 -->
      <div
        class="bg-dark-light py-3 px-4 flex items-center justify-between sticky top-0 z-50 border-b border-gray-800"
      >
        <button class="text-xl" @click="goBack">
          <i class="fa fa-arrow-left"></i>
        </button>
        <h1 class="text-lg font-bold">朋友聊天</h1>
        <button class="text-xl">
          <i class="fa fa-plus-circle"></i>
        </button>
      </div>

      <!-- 主内容区 -->
      <main class="flex-1 overflow-y-auto scrollbar-hide pb-20">
        <!-- 功能入口 -->
        <div class="bg-dark-light p-4 grid grid-cols-4 gap-3 mb-4">
          <div
            class="flex flex-col items-center animate-fade-in"
            style="animation-delay: 0.1s"
          >
            <div
              class="w-12 h-12 rounded-lg bg-gradient-to-br from-primary to-pink-500 flex items-center justify-center mb-2"
            >
              <i class="fa fa-smile-o text-white text-xl"></i>
            </div>
            <span class="text-xs text-gray-lighter">贴纸</span>
          </div>
          <div
            class="flex flex-col items-center animate-fade-in"
            style="animation-delay: 0.2s"
          >
            <div
              class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center mb-2"
            >
              <i class="fa fa-thumbs-up text-white text-xl"></i>
            </div>
            <span class="text-xs text-gray-lighter">赞</span>
          </div>
          <div
            class="flex flex-col items-center animate-fade-in"
            style="animation-delay: 0.3s"
          >
            <div
              class="w-12 h-12 rounded-lg bg-gradient-to-br from-green-500 to-teal-500 flex items-center justify-center mb-2"
            >
              <i class="fa fa-commenting-o text-white text-xl"></i>
            </div>
            <span class="text-xs text-gray-lighter">评论吧</span>
          </div>
          <div
            class="flex flex-col items-center animate-fade-in"
            style="animation-delay: 0.4s"
          >
            <div
              class="w-12 h-12 rounded-lg bg-gradient-to-br from-yellow-500 to-orange-500 flex items-center justify-center mb-2"
            >
              <i class="fa fa-video-camera text-white text-xl"></i>
            </div>
            <span class="text-xs text-gray-lighter">随拍互动</span>
          </div>
        </div>

        <!-- 应用推荐 -->
        <div class="bg-dark-light rounded-xl mx-4 p-4 mb-4 shadow-lg">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <img
                src="https://picsum.photos/seed/douyin/60/60"
                alt="多闪图标"
                class="w-14 h-14 rounded-lg object-cover"
              />
              <div class="ml-3">
                <h3 class="font-bold">多闪</h3>
                <p class="text-xs text-gray-light">短视频社交</p>
              </div>
            </div>
            <el-button
              size="small"
              type="primary"
              class="bg-primary hover:bg-primary/90 text-white rounded-full px-4 py-1.5"
            >
              下载
            </el-button>
          </div>
          <div class="mt-3 text-xs text-gray-lighter">在线互关聊天</div>
        </div>

        <!-- 朋友动态列表 -->
        <div class="px-4 space-y-3">
          <div
            class="bg-dark-light rounded-xl p-3 shadow-sm hover:shadow-md transition-shadow"
            v-for="(friend, index) in friends"
            :key="index"
          >
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <img
                  :src="friend.avatar"
                  alt="用户头像"
                  class="w-10 h-10 rounded-full object-cover border-2 border-primary/50"
                />
                <div class="ml-3">
                  <h4 class="font-medium text-sm">{{ friend.name }}</h4>
                  <p class="text-xs text-gray-light truncate w-48">
                    {{ friend.message }}
                  </p>
                </div>
              </div>
              <div class="text-xs text-gray-light">{{ friend.time }}</div>
            </div>
          </div>
        </div>
      </main>

      <!-- 底部导航 -->
      <div
        class="fixed bottom-0 left-0 right-0 bg-dark-light border-t border-gray-800 py-2 px-4 flex justify-around"
      >
        <a href="#" class="flex flex-col items-center text-primary">
          <i class="fa fa-home text-xl"></i>
          <span class="text-xs mt-1">首页</span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-light">
          <i class="fa fa-compass text-xl"></i>
          <span class="text-xs mt-1">发现</span>
        </a>
        <a href="#" class="flex flex-col items-center">
          <div
            class="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-pink-500 flex items-center justify-center -mt-4"
          >
            <i class="fa fa-plus text-white"></i>
          </div>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-light">
          <i class="fa fa-commenting text-xl"></i>
          <span class="text-xs mt-1">消息</span>
        </a>
        <a href="#" class="flex flex-col items-center text-gray-light">
          <i class="fa fa-user text-xl"></i>
          <span class="text-xs mt-1">我的</span>
        </a>
      </div>
    </div>

    <!-- 引入 Vue 和 ElementPlus -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.prod.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-plus@2.4.1/dist/index.min.js"></script>

    <script>
      const { createApp } = Vue;

      const app = createApp({
        data() {
          return {
            friends: [
              {
                id: 1,
                name: "在云小少爷",
                avatar: "https://picsum.photos/seed/user1/100/100",
                message: "在云小少爷发布了新作品",
                time: "20:20",
              },
              {
                id: 2,
                name: "抖音小助手",
                avatar: "https://picsum.photos/seed/user2/100/100",
                message: "2024年1月抖音活动预告",
                time: "06:04",
              },
              {
                id: 3,
                name: "用户588533255296",
                avatar: "https://picsum.photos/seed/user3/100/100",
                message: "用户588533255296的个性签名",
                time: "17:24",
              },
              {
                id: 4,
                name: "系统化撸号",
                avatar: "https://picsum.photos/seed/user4/100/100",
                message: "搞几个号，一人做运营团队",
                time: "昨天",
              },
              {
                id: 5,
                name: "旅行日记",
                avatar: "https://picsum.photos/seed/user5/100/100",
                message: "分享我的西藏之旅",
                time: "3天前",
              },
            ],
          };
        },
        methods: {
          goBack() {
            // 模拟返回操作
            console.log("返回上一页");
          },
        },
      });
      // 全局注册 ElementPlus 组件
      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>
